<template>
    <view :class="['jk-tag', getType, getTheme, {'jk-tag-disable': !checkable }]" @tap="tapTag">
        <slot></slot>
    </view>
</template>

<script>
	export default {
        name: 'Tag',
        props: {
            name : {
                type : String,
                default : ''
            },
            
            checkable : {
                type : Boolean,
                default : false
            },
            
            checked : {
                type : Boolean,
                default : true
            },
            
            type : {
                type : String,
                default : 'primary',
                validator(val){
                    return ['primary', 'success', 'error', 'warning', 'info'].includes(val)
                }
            },
            
            theme : {
                type : String,
                default : 'light',
                validator(val){
                    return ['light', 'dark', 'plain'].includes(val)
                }
            } 
        },
		data() {
			return {
				
			};
		},
        methods: {
            tapTag(){
                if( this.checkable ){
                    const checked = this.checked ? false : true;
                    this.$emit('change',{
                        name : this.name || '',
                        checked : checked
                    });
                }
            }
        },
        computed: {
            getType(){
                return `jk-tag-${this.type}`
            },
            getTheme(){
                return `jk-tag-${this.type}-${this.theme}`
            },
            getClass() {
                const color = this.color;
                const type = this.type;
                const checked = this.checked;
                const checkable = this.checkable;
                
                let initColorList = ['blue', 'green', 'red', 'yellow', 'default'];
                let theme = '';
                let className = 'jk-tag-';
                if( initColorList.includes( color )){
                    theme = className + color;
                }
                if( type === 'border' ){
                    theme = className + color + '-border';
                }
                if( checkable && checked ){
                    theme = className+color+'-checked';
                }else if( checkable && !checked ){
                    theme =  ( type === 'border' ? className + color +'-border' : className+'none' );
                }
            
                return theme;
            }
        }
	}
</script>

<style lang="scss">
.jk-tag {
    display: inline-block;
    border-radius: 4px;
    background: #fff;
    font-size: 24upx;
    padding: 10upx 26upx;
    box-sizing: border-box;
    border: 1px solid transparent;
    white-space: nowrap;
    &+&{
        margin-left: 20upx;
    }
    &-primary {
        border-color: $uni-color-primary-light-8;
        background: $uni-color-primary-light-9;
        color: $uni-color-primary;
        &-light{
            @extend .jk-tag-primary;
        }
        &-plain{
            color: $uni-color-primary;
            border-color: $uni-color-primary-light-6;
            background: $uni-white;
        }
        &-dark{
            color: $uni-white;
            border-color: $uni-color-primary;
            background: $uni-color-primary;
        }
    }
    &-success {
        border-color: $uni-color-success-light-8;
        background: $uni-color-success-light-9;
        color: $uni-color-success;
        &-light{
            @extend .jk-tag-success;
        }
        &-plain{
            color: $uni-color-success;
            border-color: $uni-color-success-light-6;
            background: $uni-white;
        }
        &-dark{
            color: $uni-white;
            border-color: $uni-color-success;
            background: $uni-color-success;
        }
    }
    &-warning {
        border-color: $uni-color-warning-light-8;
        background: $uni-color-warning-light-9;
        color: $uni-color-warning;
        &-light{
            @extend .jk-tag-warning;
        }
        &-plain{
            color: $uni-color-warning;
            border-color: $uni-color-warning-light-6;
            background: $uni-white;
        }
        &-dark{
            color: $uni-white;
            border-color: $uni-color-warning;
            background: $uni-color-warning;
        }
    }
    &-error {
        border-color: $uni-color-error-light-8;
        background: $uni-color-error-light-9;
        color: $uni-color-error;
        &-light{
            @extend .jk-tag-error;
        }
        &-plain{
            color: $uni-color-error;
            border-color: $uni-color-error-light-6;
            background: $uni-white;
        }
        &-dark{
            color: $uni-white;
            border-color: $uni-color-error;
            background: $uni-color-error;
        }
    }
    &-info {
        border-color: $uni-color-info-light-8;
        background: $uni-color-info-light-9;
        color: $uni-color-info;
        &-light{
            @extend .jk-tag-info;
        }
        &-plain{
            color: $uni-color-info;
            border-color: $uni-color-info-light-6;
            background: $uni-white;
        }
        &-dark{
            color: $uni-white;
            border-color: $uni-color-info;
            background: $uni-color-info;
        }
    }
}

</style>
